<%@ page language="java" import="com.qipay.admin.utils.SiteHelper" contentType="text/html;charset=utf-8" %>
<%@ page import="com.qipay.baas.model.WhiteIps" %>
<%@ page import="java.util.List" %>
<!doctype html>
<html>
<head>
    <jsp:include page="head.jsp"></jsp:include>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="nav.jsp"></jsp:include>
    <jsp:include page="left.jsp"></jsp:include>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">IP白名单</h3>
                            <button type="button" data-toggle="modal" data-target="#newWhiteIpsModal"
                                    class="btn btn-primary">
                                新增白名单
                            </button>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body container-fluid">
                            <div class="row">
                                <%
                                    List<WhiteIps> whiteIpsList = (List<WhiteIps>) request.getAttribute("ips");
                                    for (WhiteIps w : whiteIpsList) {
                                %>
                                <div class="col-md-2 margin-r-5 with-border">
                                        <span style="font-size: 24px;color:#888"><%=w.getIpAddress()%></span>
                                        <button onClick="ipsPreDel(<%=w.getId()%>)" type="button" class="close"
                                                data-toggle="modal" data-target="#myModal">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                </div>
                                <%}%>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="foot.jsp"></jsp:include>

    <!-- Modal 弹窗警告-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span style="color:red">警告!</span></h4>
                </div>
                <div class="modal-body">
                    您确定要删除这个ip白名单吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="ipsSureDel()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 新增模态-->
    <div class="modal fade" id="newWhiteIpsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title control-label" id="newWhiteIpsModallabel">添加新的白名单IP</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group form-group-md">
                            <label class="col-sm-2 control-label" for="ipAddress">IP地址:</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" id="ipAddress" placeholder="请输入IP地址">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
                    <button type="button" class="btn btn-primary" onclick="ipsAdd()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<%= request.getAttribute("StaticHost") %>/js/fastclick.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/adminlte.min.js"></script>
<script language="JavaScript">
    var preDelId = null;

    /**
     * 预删除存起id
     */
    function ipsPreDel(id) {
        if (!!id) {
            preDelId = id;
        }
    }

    /**
     * 正式删除发起请求,调后端删除接口
     */
    function ipsSureDel() {
        $.ajax({
            url: contextPath + "/ips/delete",
            data: {id: preDelId},
            type: "POST",
            async: true,//true异步 false同步
            context: this,
            timeout: 10000,
            success: function (data) {
                if (data && data.code == 200) {
                    location.href = '${pageContext.request.contextPath}/ips/query';
                }
            },
            error: function (d, s, b) {
                console.log("失败:", b);
            }
        });
    }

    /**
     * 新增一个ip白名单
     */
    function ipsAdd() {
        var isValidIP = function (ip) {
            var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
            return reg.test(ip);
        }

        //取值
        var ipAddress = $("#ipAddress").val();

        //校验
        if (!ipAddress) {
            alert("IP地址不能为空");
            return ;
        }
        if (!isValidIP(ipAddress)) {
            alert("IP地址格式不正确,请输入正确的IP地址");
            return ;
        }
        //请求
        $.ajax({
            url: contextPath + "/ips/add",
            data: {ipAddress: ipAddress},
            type: "POST",
            async: true,//true异步 false同步
            context: this,
            timeout: 10000,
            success: function (data) {
                if (data && data.code == 200) {
                    location.href = '${pageContext.request.contextPath}/ips/query';
                }
            },
            error: function (d, s, b) {
                console.log("失败:", b);
            }
        });
    }

    /**
     * 监听回车
     */
    $(function(){
        $("#ipAddress").keypress(function (event) {
            var key = event.which;
            if (key == 13) {
                ipsAdd();
                return false;
            }
        });
    });
</script>
</body>
</html>

